import React, { useEffect, useState, useRef } from 'react'
import { Button, PageHeader, Steps, Form, Input, Select, message, notification } from 'antd';
import './NewAdd.css'
import axios from 'axios';
import NewEditor from '../../../components/news-manage/NewEditor';
import { withRouter } from 'react-router-dom'
const { Step } = Steps;

function NewUpdate(props) {

    const [currIndex, setcurrIndex] = useState(0)
    const [categoryList, setcategoryList] = useState([])

    //表单 + 文本
    const [formInfo, setformInfo] = useState({})
    const [contentInfo, setcontentInfo] = useState('')
    useEffect(() => {
        axios.get('/categories').then(res => {
            const list = res.data.map(item => ({
                label: item.title,
                value: item.id
            }))
            setcategoryList(list)
        })
    }, [])

    const [fromInfo, setFromInfo] = useState(null)
    useEffect(() => {
        axios.get(`/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
            // setFromInfo(res.data)
            const { title, categoryId, content } = res.data
            formRefs.current.setFieldsValue({
                title,
                categoryId
            })
            setcontentInfo(content)
        })
    }, [props.match.params.id])


    const handelNext = () => {
        if (currIndex === 0) {
            formRefs.current.validateFields().then(res => {
                console.log(res)
                setformInfo(res)
                setcurrIndex(currIndex + 1)
            }).catch(err => console.log(err))
            return
        }

        if (contentInfo === '' || contentInfo.trim() === '<p></p>') return message.error('新闻信息不能为空')
        setcurrIndex(currIndex + 1)
    }
    const handelReplace = () => {
        setcurrIndex(currIndex - 1)
    }
    const user = JSON.parse(localStorage.getItem('token'))
    const handelSave = (status) => {
        axios.patch(`/news/${props.match.params.id}`, {
            ...formInfo,
            content: contentInfo,
            auditState: status,
        }).then(res => {
            props.history.push(status === 0 ? '/news-manage/draft' : '/audit-manage/list')
            notification.info({
                message: '通知',
                description: `您可以通过${status === 0 ? '草稿箱' : '审核列表'}中查看你的新闻`,
                placement: 'bottomRight'
            })
        })
    }
    const formRefs = useRef()
    return (
        <div>
            <PageHeader
                className="site-page-header"
                title="更新内容"
                subTitle=""
                onBack={() => props.history.goBack()}
            />
            <Steps current={currIndex}>
                <Step title="基本信息" description='新闻标题,新闻分类' />
                <Step title="新闻内容" description='新闻主体内容' />
                <Step title="新闻提交" description='保存草稿或者提交审核' />
            </Steps>

            <div style={{ marginTop: '20px' }}>
                <div className={currIndex === 0 ? '' : 'active'}>
                    <Form
                        ref={formRefs}
                        name="basic"
                        labelCol={{
                            span: 0,
                        }}
                        wrapperCol={{
                            span: 18,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="新闻标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="新闻分类"
                            name="categoryId"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Select
                                options={categoryList}
                            />
                        </Form.Item>
                    </Form>
                </div>
                <div className={currIndex === 1 ? '' : 'active'}>
                    <NewEditor getCurrentContent={(value) => {
                        setcontentInfo(value)
                    }} contentInfo={contentInfo}></NewEditor>
                </div>
                <div className={currIndex === 2 ? '' : 'active'}></div>
            </div>

            <div style={{ marginTop: '20px' }}>
                {
                    currIndex === 2 && <span>
                        <Button type='primary' style={{ marginRight: '10px' }} onClick={() => handelSave(0)}>保存草稿</Button>
                        <Button danger style={{ marginRight: '10px' }} onClick={() => handelSave(1)}>提交审核</Button>
                    </span>
                }
                {
                    currIndex < 2 && <span>
                        <Button type='primary' style={{ marginRight: '10px' }} onClick={handelNext}>下一步</Button>
                    </span>
                }
                {
                    currIndex > 0 && <span>
                        <Button onClick={handelReplace}>上一步</Button>
                    </span>
                }
            </div>
        </div>
    )
}

export default withRouter(NewUpdate)